<template>
  <div class="console">
    <h1>{{ $route.name }}</h1>
    <h2>{{ $route.path }}</h2>
    <a-form
      class="main"
      :form="form"
      v-bind="formItemLayout"
      @submit="handleSubmit"
    >
      <a-form-item label="Plain Text">
        <span class="ant-form-text">
          UI 组件测试
        </span>
      </a-form-item>

      <a-form-item label="Select" has-feedback>
        <a-select
          v-decorator="[
            'select',
            {
              rules: [
                { required: true, message: 'Please select your country!' }
              ]
            }
          ]"
          placeholder="Please select a country"
        >
          <a-select-option value="china">
            China
          </a-select-option>
          <a-select-option value="usa">
            U.S.A
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="Select[multiple]">
        <a-select
          v-decorator="[
            'select-multiple',
            {
              rules: [
                {
                  required: true,
                  message: 'Please select your favourite colors!',
                  type: 'array'
                }
              ]
            }
          ]"
          mode="multiple"
          placeholder="Please select favourite colors"
        >
          <a-select-option value="red">
            Red
          </a-select-option>
          <a-select-option value="green">
            Green
          </a-select-option>
          <a-select-option value="blue">
            Blue
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="InputNumber">
        <a-input-number
          style="width: 100%;"
          v-decorator="['input-number', { initialValue: 3 }]"
          :min="1"
          :max="10"
        />
        <span class="ant-form-text">
          machines
        </span>
      </a-form-item>

      <a-form-item label="DatePicker">
        <a-date-picker
          style="width: 100%;"
          v-decorator="['date-picker', config]"
        />
      </a-form-item>
      <a-form-item label="DatePicker[showTime]">
        <a-date-picker
          style="width: 100%;"
          v-decorator="['date-time-picker', config]"
          show-time
          format="YYYY-MM-DD HH:mm:ss"
        />
      </a-form-item>
      <a-form-item label="MonthPicker">
        <a-month-picker
          style="width: 100%;"
          v-decorator="['month-picker', config]"
        />
      </a-form-item>
      <a-form-item label="RangePicker">
        <a-range-picker
          style="width: 100%;"
          v-decorator="['range-picker', rangeConfig]"
        />
      </a-form-item>
      <a-form-item label="RangePicker[showTime]">
        <a-range-picker
          style="width: 100%;"
          v-decorator="['range-time-picker', rangeConfig]"
          show-time
          format="YYYY-MM-DD HH:mm:ss"
        />
      </a-form-item>
      <a-form-item label="TimePicker">
        <a-time-picker
          style="width: 100%;"
          v-decorator="['time-picker', config]"
        />
      </a-form-item>

      <a-form-item label="Switch">
        <a-switch v-decorator="['switch', { valuePropName: 'checked' }]" />
      </a-form-item>

      <a-form-item label="Slider">
        <a-slider
          v-decorator="['slider']"
          :marks="{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }"
        />
      </a-form-item>

      <a-form-item label="Radio.Group">
        <a-radio-group v-decorator="['radio-group']">
          <a-radio value="a">
            item 1
          </a-radio>
          <a-radio value="b">
            item 2
          </a-radio>
          <a-radio value="c">
            item 3
          </a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="Radio.Button">
        <a-radio-group v-decorator="['radio-button']">
          <a-radio-button value="a">
            item 1
          </a-radio-button>
          <a-radio-button value="b">
            item 2
          </a-radio-button>
          <a-radio-button value="c">
            item 3
          </a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="Checkbox.Group">
        <a-checkbox-group
          v-decorator="['checkbox-group', { initialValue: ['A', 'B'] }]"
          style="width: 100%;"
        >
          <a-row>
            <a-col :span="8">
              <a-checkbox value="A">
                A
              </a-checkbox>
            </a-col>
            <a-col :span="8">
              <a-checkbox disabled value="B">
                B
              </a-checkbox>
            </a-col>
            <a-col :span="8">
              <a-checkbox value="C">
                C
              </a-checkbox>
            </a-col>
            <a-col :span="8">
              <a-checkbox value="D">
                D
              </a-checkbox>
            </a-col>
            <a-col :span="8">
              <a-checkbox value="E">
                E
              </a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </a-form-item>

      <a-form-item label="Rate">
        <a-rate v-decorator="['rate', { initialValue: 3.5 }]" allow-half />
      </a-form-item>

      <a-form-item label="Upload" extra="extra info">
        <a-upload
          v-decorator="[
            'upload',
            {
              valuePropName: 'fileList',
              getValueFromEvent: normFile
            }
          ]"
          name="logo"
          action="/upload.do"
          list-type="picture"
        >
          <a-button> <a-icon type="upload" /> Click to upload </a-button>
        </a-upload>
      </a-form-item>

      <a-form-item label="Dragger">
        <div class="dropbox">
          <a-upload-dragger
            v-decorator="[
              'dragger',
              {
                valuePropName: 'fileList',
                getValueFromEvent: normFile
              }
            ]"
            name="files"
            action="/upload.do"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">
              Click or drag file to this area to upload
            </p>
            <p class="ant-upload-hint">
              Support for a single or bulk upload.
            </p>
          </a-upload-dragger>
        </div>
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
        <a-button type="primary" html-type="submit">
          Submit
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  name: "Console",
  components: {},
  data: () => ({
    formItemLayout: {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 }
    },
    config: {
      rules: [
        { type: "object", required: true, message: "Please select time!" }
      ]
    },
    rangeConfig: {
      rules: [{ type: "array", required: true, message: "Please select time!" }]
    }
  }),
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "validate_other" });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, fieldsValue) => {
        if (!err) {
          // Should format date value before submit.
          const rangeValue = fieldsValue["range-picker"];
          const rangeTimeValue = fieldsValue["range-time-picker"];
          const values = {
            ...fieldsValue,
            "date-picker": fieldsValue["date-picker"].format("YYYY-MM-DD"),
            "date-time-picker": fieldsValue["date-time-picker"].format(
              "YYYY-MM-DD HH:mm:ss"
            ),
            "month-picker": fieldsValue["month-picker"].format("YYYY-MM"),
            "range-picker": [
              rangeValue[0].format("YYYY-MM-DD"),
              rangeValue[1].format("YYYY-MM-DD")
            ],
            "range-time-picker": [
              rangeTimeValue[0].format("YYYY-MM-DD HH:mm:ss"),
              rangeTimeValue[1].format("YYYY-MM-DD HH:mm:ss")
            ],
            "time-picker": fieldsValue["time-picker"].format("HH:mm:ss")
          };
          console.log("Received values of form: ", values);
        }
      });
    },
    normFile(e) {
      console.log("Upload event:", e);
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    }
  }
};
</script>

<style scoped lang="less">
.dropbox {
  height: 180px;
  line-height: 1.5;
}
</style>
